import React, { memo } from 'react'
import cx from 'classnames'

import { CategoryWrap } from './styled'

interface PostCategoryProps {
  categoryList: any[]
  current: string
  onClickCategory: (e: React.MouseEvent, name: string) => void
}

function PostCategory({
  categoryList,
  current,
  onClickCategory,
}: PostCategoryProps) {
  return (
    <CategoryWrap>
      {/* 桌面下 */}
      <div className="items-container">
        {categoryList.map((item) => (
          <a
            className={cx('grid-item', current === item.name ? 'current' : '')}
            key={item.name}
            onClick={(e) => onClickCategory(e, item.name)}
          >
            {item.name}
          </a>
        ))}
      </div>
      {/* 移动端下 */}
      <div className="items-scrollbar">
        <div className="scroll-inner ">
          {categoryList.map((item) => (
            <div className="item-wrap" key={item.name}>
              <span
                className={cx(
                  'item',
                  current === item.name ? 'current-mobile' : ''
                )}
                onClick={(e) => onClickCategory(e, item.name)}
              >
                {item.name}
              </span>
            </div>
          ))}
        </div>
      </div>
    </CategoryWrap>
  )
}

export default memo(PostCategory)
